<template>
	<view class="auth-page">
		<!-- 步骤指示器 -->
		<view class="steps">
			<view class="step-item" :class="{ active: currentStep >= 1, current: currentStep === 1 }" @click="changeStep(1)">
				<view class="step-number">1</view>
				<view class="step-title">实名认证</view>
			</view>
			<view class="step-line"></view>
			<view class="step-item" :class="{ active: currentStep >= 2, current: currentStep === 2 }" @click="changeStep(2)">
				<view class="step-number">2</view>
				<view class="step-title">驾驶证</view>
			</view>
			<view class="step-line"></view>
			<view class="step-item" :class="{ active: currentStep >= 3, current: currentStep === 3 }" @click="changeStep(3)">
				<view class="step-number">3</view>
				<view class="step-title">行驶证</view>
			</view>
		</view>

		<!-- 实名认证步骤 -->
		<view class="step-content" v-show="currentStep === 1">
			<view class="section-auth-title">实名认证</view>
			<view class="section-subtitle">身份证照片</view>
			<view class="section-tips">请上传清晰完整的身份证正反面</view>

			<view class="upload-group">
				<view class="upload-item" @click="uploadIDCard('front')">
					<image v-if="idCard.front" :src="idCard.front" mode="aspectFill" class="uploaded-image"></image>
					<view v-else class="upload-placeholder">
						<image class="front-icon" src="/static/personalCenter/front.png" mode="aspectFill"></image>
						<text>
							点击上传
							<text style="color: #ff7937">人像面</text>
						</text>
					</view>
				</view>

				<view class="upload-item" @click="uploadIDCard('back')">
					<image v-if="idCard.back" :src="idCard.back" mode="aspectFill" class="uploaded-image"></image>
					<view v-else class="upload-placeholder">
						<image class="reverse-side-icon" src="/static/personalCenter/reverse-side.png" mode="aspectFill"></image>
						<text>
							点击上传
							<text style="color: #ff7937">国徽面</text>
						</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-label">真实姓名</view>
				<input class="form-input" v-model="real_name" placeholder="请输入真实姓名" placeholder-class="placeholder" />
			</view>

			<view class="form-item">
				<view class="form-label">身份证号</view>
				<input class="form-input" v-model="id_card_number" placeholder="请输入身份证号" placeholder-class="placeholder" maxlength="18" />
			</view>

			<view class="form-item" @click="isShowDatePicker1 = true">
				<view class="form-label">证件有效期</view>
				<view class="form-input">
					<text :class="{ placeholder: !id_card_validity }">
						{{ id_card_validity || '请选择' }}
					</text>
					<image class="details-side-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 驾驶证步骤 -->
		<view class="step-content" v-show="currentStep === 2">
			<view class="section-auth-title">驾驶证</view>
			<view class="section-subtitle">驾驶证正本</view>
			<view class="section-tips">请上传清晰的驾驶证照片</view>

			<view class="upload-single">
				<view class="upload-item" @click="uploadDriverLicense">
					<image v-if="driverLicense" :src="driverLicense" mode="aspectFill" class="uploaded-image"></image>
					<view v-else class="upload-placeholder">
						<image class="front-icon" src="/static/personalCenter/other.png" mode="aspectFill"></image>
						<text>点击上传驾驶证</text>
					</view>
				</view>
			</view>

			<view class="form-item" @click="isShowDatePicker2 = true">
				<view class="form-label">证件有效期</view>
				<view class="form-input">
					<text :class="{ placeholder: !driver_license_validity }">
						{{ driver_license_validity || '请选择' }}
					</text>
					<image class="details-side-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 行驶证步骤 -->
		<view
			class="step-content"
			v-show="currentStep === 3"
			v-for="(item, index) in vehicleLicenseList"
			:key="index"
			:class="{ 'step-content-multiple': index > 0, 'step-content-one': vehicleLicenseList.length == 1 }"
		>
			<view class="drive-section-auth-title">
				<view>行驶证-{{ index + 1 }}</view>
				<view style="display: flex">
					<view class="drive-add-content" @click="addVehicleLicense()">
						<image class="drive-add-icon" src="/static/personalCenter/auth-add.png" mode="aspectFill"></image>
						<text class="drive-add-text">添加行驶证</text>
					</view>
					<view class="drive-add-content drive-del-content" @click="removeVehicleLicenseItem(index)" v-if="index > 0">
						<image class="drive-add-icon" src="/static/personalCenter/auth-del.png" mode="aspectFill"></image>
						<text class="drive-del-text">删除</text>
					</view>
				</view>
			</view>
			<view class="section-tips">请上传清晰的行驶证照片</view>
			<view class="form-item">
				<view class="form-label">车牌号</view>
				<input class="form-input" v-model="item.car_number" placeholder="请填写" placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<view class="form-label">品牌型号</view>
				<view class="form-input" @click="selectCar">
					<text>{{ item.brand_model }}</text>
					<image class="details-side-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">车座数</view>
				<input class="form-input" v-model="item.seats" placeholder="请填写" placeholder-class="placeholder" maxlength="18" />
			</view>

			<view class="upload-single">
				<view class="single-label">行驶证正本</view>
				<view class="upload-item" @click="uploadVehicleLicense(item)">
					<image v-if="item.front" :src="item.front" mode="aspectFill" class="uploaded-image"></image>
					<view v-else class="upload-placeholder">
						<image class="front-icon" src="/static/personalCenter/other.png" mode="aspectFill"></image>
						<text>点击上传行驶证</text>
					</view>
				</view>
			</view>
			<view class="form-item" @click="checkDatePicker(index)">
				<view class="form-label">证件有效期</view>
				<view class="form-input">
					<text :class="{ placeholder: !item.drivering_license_validity }">
						{{ item.drivering_license_validity || '请选择' }}
					</text>
					<image class="details-side-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>
			<!--  type === '2'运营车主必填 -->
			<view class="upload-single" v-if="type == '2'">
				<view class="single-label">运营证正本</view>
				<view class="upload-item" @click="uploadOperatingLicense(item)">
					<image v-if="item.operating" :src="item.operating" mode="aspectFill" class="uploaded-image"></image>
					<view v-else class="upload-placeholder">
						<image class="front-icon" src="/static/personalCenter/other.png" mode="aspectFill"></image>
						<text>点击上传运营证</text>
					</view>
				</view>
			</view>
			<!-- 运营线路起点 -->
			<view v-if="type == '2'" class="form-item" @click="showLineLocationPicker(index, 'departure')">
				<text class="form-label">运营线路起点</text>
				<view class="form-input">
					<text :class="{ 'has-value-color': item.operating_license_line_start_name }">{{ item.operating_license_line_start_name || '请选择' }}</text>
					<image class="details-side-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>

			<!-- 运营线路终点 -->
			<view v-if="type == '2'" class="form-item" @click="showLineLocationPicker(index, 'destination')">
				<text class="form-label">运营线路终点</text>
				<view class="form-input">
					<text :class="{ 'has-value-color': item.operating_license_line_end_name }">{{ item.operating_license_line_end_name || '请选择' }}</text>
					<image class="details-side-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>

			<view class="form-item" v-if="type == '2'" @click="checkOperatingDatePicker(index)">
				<view class="form-label">证件有效期</view>
				<view class="form-input">
					<text :class="{ placeholder: !item.operating_license_validity }">
						{{ item.operating_license_validity || '请选择' }}
					</text>
					<image class="details-side-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 占位符 -->
		<view class="location-placeholder"></view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view class="footer-btn-warps">
				<button class="pre-btn" v-if="currentStep > 1" @click="handlePre">上一步</button>
				<button class="next-btn" :class="{ disabled: !canNext }" @click="handleNext">
					{{ currentStep === 3 ? '提交认证' : '下一步' }}
				</button>
			</view>
			<view class="footer-agreement-warps">
				<image v-if="!isChecked" class="check-icon" src="/static/personalCenter/auth-quan.png" mode="aspectFill" @click="isChecked = !isChecked"></image>
				<image v-if="isChecked" class="check-icon" src="/static/personalCenter/auth-gou.png" mode="aspectFill" @click="isChecked = !isChecked"></image>
				<text>已阅读并同意</text>
				<text class="agreement-content" style="color: #ff7937" @click="confirmShowAgreement">《隐私条款》</text>
			</view>
		</view>

		<!-- 日期选择器 -->
		<!--  -->
		<u-datetime-picker
			:style="{ height: pickerHeight + 'px' }"
			:show="isShowDatePicker1"
			mode="date"
			:value="id_card_validity"
			@confirm="handleDateConfirm1"
			@cancel="closeDatePicker1"
			closeOnClickOverlay
		></u-datetime-picker>
		<!--  -->
		<u-datetime-picker
			:show="isShowDatePicker2"
			mode="date"
			:value="driver_license_validity"
			@confirm="handleDateConfirm2"
			@cancel="closeDatePicker2"
			closeOnClickOverlay
		></u-datetime-picker>
		<!--  -->
		<u-datetime-picker
			:show="isShowDatePicker3"
			mode="date"
			:value="this.vehicleLicenseList[this.currentVehicleLicense].drivering_license_validity"
			@confirm="handleDateConfirm3"
			@cancel="closeDatePicker3"
			closeOnClickOverlay
		></u-datetime-picker>
		<!--  -->
		<u-datetime-picker
			:show="isShowDatePicker4"
			mode="date"
			:value="this.vehicleLicenseList[this.currentVehicleLicense].operating_license_validity"
			@confirm="handleDateConfirm4"
			@cancel="closeDatePicker4"
			closeOnClickOverlay
		></u-datetime-picker>
		<!-- 协议内容 -->
		<agreementPopup :showAgreement="isShowAgreement" @update:visible="updateVisibleFlag" code="privacy_agreement" />
	</view>
</template>

<script>
import moment from 'moment';
import agreementPopup from '../../common/carpooleAgreementPopup.vue';
import config from '@/config';
export default {
	components: { agreementPopup },
	data() {
		return {
			pickerHeight: 300, // 根据需求动态调整
			type: 1,
			isShowAgreement: false,
			isChecked: true,
			currentStep: 1,
			idCard: {
				front: '',
				back: ''
			},
			id_card_front: '',
			id_card_back: '',
			real_name: '',
			id_card_number: '',
			id_card_validity: '',
			driver_license_validity: '',
			driverLicense: '',

			isShowDatePicker1: false,
			isShowDatePicker2: false,
			isShowDatePicker3: false,
			isShowDatePicker4: false,
			vehicleLicenseList: [
				{
					car_number: '',
					brand_model: '',
					seats: '',
					drivering_license_validity: '',
					front: '',
					drivering_license: '',
					operating_license_line_start_name: '',
					operating_license_line_end_name: '',
					operating_license_validity: ''
				}
			],
			currentVehicleLicense: 0,
			currenPositionType: ''
		};
	},
	onLoad() {
		this.getAuthInfoData();
	},
	computed: {
		canNext() {
			switch (this.currentStep) {
				case 1:
					return this.idCard.front && this.idCard.back && this.real_name && this.id_card_number && this.id_card_validity;
				case 2:
					return this.driverLicense && this.driver_license_validity;
				case 3:
					const car = this.vehicleLicenseList[this.currentVehicleLicense];

					if (this.type === '2') {
						console.log(car.operating, 'updateData', car.operating_license_line_start_name, car.operating_license_line_end_name, car.operating_license_validity);

						return (
							car.car_number &&
							car.brand_model &&
							car.seats &&
							car.drivering_license_validity &&
							car.front &&
							car.operating &&
							car.operating_license_line_start_name &&
							car.operating_license_line_end_name &&
							car.operating_license_validity
						);
					} else {
						return car.car_number && car.brand_model && car.seats && car.drivering_license_validity && car.front;
					}
				default:
					return false;
			}
		}
	},
	methods: {
		handleCarSelected(data) {
			this.vehicleLicenseList[this.currentVehicleLicense].brand_model = `${data.brand.name}.${data.series.name}`;
		},
		selectCar() {
			uni.navigateTo({
				url: '/pages/carSelector/index'
			});
		},
		// 选择的出发地 目的地
		setLocation(data) {
			if (this.currenPositionType === 'departure') {
				this.vehicleLicenseList[this.currentVehicleLicense].operating_license_line_start_name = data.name;
				this.vehicleLicenseList[this.currentVehicleLicense].operating_license_line_start = data.id;
			} else {
				this.vehicleLicenseList[this.currentVehicleLicense].operating_license_line_end_name = data.name;
				this.vehicleLicenseList[this.currentVehicleLicense].operating_license_line_end = data.id;
			}
			console.log(this.vehicleLicenseList[this.currentVehicleLicense], 'this.vehicleLicenseList[this.currentVehicleLicense]');
		},
		showLineLocationPicker(index, type) {
			this.currentVehicleLicense = index;
			this.currenPositionType = type;
			uni.navigateTo({
				url: `/pages/home/location-picker?type=${type}&activeTab=auth`
			});
		},
		async getAuthInfoData() {
			try {
				const data = await this.$http.get('/h5/user/carowner/authInfo');
				console.log('认证数据回显：', data.data);
				this.type = data.data.type;
				this.idCard.front = data.data.id_card_front_full;
				this.id_card_front = data.data.id_card_front;
				this.idCard.back = data.data.id_card_back_full;
				this.id_card_back = data.data.id_card_back;
				this.real_name = data.data.real_name;
				this.id_card_number = data.data.id_card_number;
				this.id_card_validity = data.data.id_card_validity;
				this.driverLicense = data.data.driver_license_full;
				this.driver_license = data.data.driver_license;
				this.driver_license_validity = data.data.driver_license_validity;
				this.vehicleLicenseList =
					data.data.cars &&
					data.data.cars.map((i) => {
						return {
							car_number: i.car_number, // 车牌号
							brand_model: i.brand_model, // 品牌型号
							seats: i.seats, // 座位数
							front: i.drivering_license_full, // 行驶证正面
							drivering_license: i.drivering_license, // 行驶证
							drivering_license_validity: i.drivering_license_validity, // 行驶证有效期
							operating: i.operating_license_full, // 运营证
							operating_license: i.operating_license, // 运营证
							operating_license_validity: i.operating_license_validity, // 运营证有效期
							operating_license_line_start_name: i.operatingLicenseLineStart && i.operatingLicenseLineStart.name, // 运营证线路起点
							operating_license_line_start: i.operatingLicenseLineStart && i.operatingLicenseLineStart.id, // 运营证线路起点id
							operating_license_line_end_name: i.operatingLicenseLineEnd && i.operatingLicenseLineEnd.name, // 运营证线路终点
							operating_license_line_end: i.operatingLicenseLineEnd && i.operatingLicenseLineEnd.id // 运营证线路终点id
						};
					});
			} catch (error) {}
		},
		// 验证身份证号码的简单方法
		validateIdCard() {
			// 15位或18位，最后一位可以是X或x
			const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			return reg.test(this.id_card_number);
		},
		goBack() {
			uni.navigateBack();
		},
		changeStep(step) {
			if (step < this.currentStep) {
				this.currentStep = step;
			}
		},
		updateVisibleFlag() {
			this.isShowAgreement = false;
		},
		confirmShowAgreement() {
			this.isShowAgreement = true;
		},
		// 检查文件大小限制（2MB）
		checkFileSize(file) {
			const maxSize = 5 * 1024 * 1024; // 2MB
			if (file.size > maxSize) {
				uni.showToast({
					title: '图片大小不能超过5MB',
					icon: 'none'
				});
				return false;
			}
			return true;
		},
		// 身份证相关
		uploadIDCard(type) {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 检查文件大小
					if (!this.checkFileSize(res.tempFiles[0])) {
						return;
					}
					this.idCard[type] = res.tempFilePaths[0]; // // 临时文件路径
					this.uploadImage(res.tempFiles[0], type);
				},
				fail() {
					uni.showToast({
						title: '未授权访问相册权限，请授权后使用',
						icon: 'none'
					});
				}
			});
		},
		async uploadImage(file, type) {
			const formData = new FormData();
			formData.append('file', file); // file是File对象
			uni.showLoading({
				title: '上传中',
				mask: true
			});
			try {
				const res = await fetch(config.baseUrl + '/h5/common/upload', {
					method: 'POST',
					body: formData,
					headers: {
						Authorization: 'Bearer ' + uni.getStorageSync('token')
					}
				});
				const { data } = await res.json();
				uni.hideLoading();
				console.log('上传成功:', data);
				if (type === 'front') {
					this.id_card_front = data.file;
				} else {
					this.id_card_back = data.file;
				}

				uni.showToast({
					title: '上传成功',
					icon: 'success',
					duration: 1500
				});
			} catch (err) {
				uni.hideLoading();
				// 上传失败时，清除临时图片显示
				if (type === 'front') {
					this.idCard.front = '';
					this.id_card_front = '';
				} else {
					this.idCard.back = '';
					this.id_card_back = '';
				}
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		},
		// 驾驶证相关
		uploadDriverLicense() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 检查文件大小
					if (!this.checkFileSize(res.tempFiles[0])) {
						return;
					}
					this.driverLicense = res.tempFilePaths[0];
					this.uploadDriverLicenseImage(res.tempFiles[0]);
				}
			});
		},
		async uploadDriverLicenseImage(file) {
			const formData = new FormData();
			formData.append('file', file); // file是File对象
			uni.showLoading({
				title: '上传中',
				mask: true
			});
			try {
				const res = await fetch(config.baseUrl + '/h5/common/upload', {
					method: 'POST',
					body: formData,
					headers: {
						Authorization: 'Bearer ' + uni.getStorageSync('token')
					}
				});
				const { data } = await res.json();
				uni.hideLoading();
				console.log('上传成功:', data);
				this.driver_license = data.file;
				uni.showToast({
					title: '上传成功',
					icon: 'success',
					duration: 1500
				});
			} catch (err) {
				uni.hideLoading();
				// 上传失败时，清除临时图片显示
				this.driverLicense = '';
				this.driver_license = '';
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		},
		// 行驶证
		uploadVehicleLicense(item) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 检查文件大小
					if (!this.checkFileSize(res.tempFiles[0])) {
						return;
					}
					item.front = res.tempFilePaths[0];
					this.uploadDriveringLicenseImage(res.tempFiles[0], item);
				}
			});
		},
		// 上传行驶证
		async uploadDriveringLicenseImage(file, item) {
			const formData = new FormData();
			formData.append('file', file); // file是File对象
			uni.showLoading({
				title: '上传中',
				mask: true
			});
			try {
				const res = await fetch(config.baseUrl + '/h5/common/upload', {
					method: 'POST',
					body: formData,
					headers: {
						Authorization: 'Bearer ' + uni.getStorageSync('token')
					}
				});
				const { data } = await res.json();
				uni.hideLoading();
				console.log('上传成功:', data);
				item.drivering_license = data.file;
				uni.showToast({
					title: '上传成功',
					icon: 'success',
					duration: 1500
				});
			} catch (err) {
				uni.hideLoading();
				// 上传失败时，清除临时图片显示
				item.front = '';
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		},
		// 增加行驶证相关
		addVehicleLicense() {
			let params = {
				car_number: '',
				brand_model: '',
				seats: '',
				drivering_license_validity: ''
			};
			if (this.type === '2') {
				(params.operating = ''), (params.operating_license_validity = '');
				params.operating_license_line_start_name = '';
				params.operating_license_line_end_name = '';
			}
			this.vehicleLicenseList.push(params);
		},
		// 移除行驶证相关
		removeVehicleLicenseItem(index) {
			this.vehicleLicenseList.splice(index, 1);
		},
		// 身份证相关
		closeDatePicker1() {
			this.isShowDatePicker1 = false;
		},
		handleDateConfirm1(e) {
			this.id_card_validity = moment(e.value).format('YYYY-MM-DD');
			this.isShowDatePicker1 = false;
		},
		// 驾驶证相关
		closeDatePicker2() {
			this.isShowDatePicker2 = false;
		},
		handleDateConfirm2(e) {
			this.driver_license_validity = moment(e.value).format('YYYY-MM-DD');
			this.isShowDatePicker2 = false;
		},
		// 行驶证
		checkDatePicker(index) {
			this.currentVehicleLicense = index;
			this.isShowDatePicker3 = true;
		},
		closeDatePicker3() {
			this.isShowDatePicker3 = false;
			this.currentVehicleLicense = 0;
		},
		handleDateConfirm3(e) {
			this.vehicleLicenseList[this.currentVehicleLicense].drivering_license_validity = moment(e.value).format('YYYY-MM-DD');
			this.closeDatePicker3();
		},
		// 运营证相关
		checkOperatingDatePicker(index) {
			this.currentVehicleLicense = index;
			this.isShowDatePicker4 = true;
		},
		closeDatePicker4() {
			this.isShowDatePicker4 = false;
			this.currentVehicleLicense = 0;
		},
		handleDateConfirm4(e) {
			this.vehicleLicenseList[this.currentVehicleLicense].operating_license_validity = moment(e.value).format('YYYY-MM-DD');
			this.closeDatePicker4();
		},
		// 运营证
		uploadOperatingLicense(item) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 检查文件大小
					if (!this.checkFileSize(res.tempFiles[0])) {
						return;
					}
					item.operating = res.tempFilePaths[0];
					this.uploadOperatingLicenseImage(res.tempFiles[0], item);
				}
			});
		},
		async uploadOperatingLicenseImage(file, item) {
			const formData = new FormData();
			formData.append('file', file); // file是File对象
			uni.showLoading({
				title: '上传中',
				mask: true
			});
			try {
				const res = await fetch(config.baseUrl + '/h5/common/upload', {
					method: 'POST',
					body: formData,
					headers: {
						Authorization: 'Bearer ' + uni.getStorageSync('token')
					}
				});
				const { data } = await res.json();
				uni.hideLoading();
				console.log('上传成功:', data);
				item.operating_license = data.file;
				uni.showToast({
					title: '上传成功',
					icon: 'success',
					duration: 1500
				});
			} catch (err) {
				uni.hideLoading();
				item.operating = '';
				item.operating_license = '';
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		},
		handlePre() {
			this.currentStep--;
		},
		handleNext() {
			let step1Data = {
				id_card_front: this.id_card_front,
				id_card_back: this.id_card_back,
				real_name: this.real_name,
				id_card_number: this.id_card_number,
				id_card_validity: this.id_card_validity
			};
			let step2Data = {
				driver_license: this.driver_license,
				driver_license_validity: this.driver_license_validity
			};
			console.log(step1Data, 1);
			console.log(step2Data, 2);
			console.log(this.vehicleLicenseList, 3);
			let params = {
				type: this.type,
				...step1Data,
				...step2Data,
				cars: this.vehicleLicenseList
			};
			if (!this.canNext) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}

			if (this.currentStep === 3) {
				if (!this.isChecked) {
					uni.showToast({
						title: '请阅读并同意隐私条款',
						icon: 'none'
					});
					return;
				}
				this.submitAuth(params);
			} else {
				this.currentStep++;
			}
		},
		async submitAuth(params) {
			uni.showLoading({
				title: '提交中...'
			});
			try {
				const data = await this.$http.post('/h5/user/carowner/auth', params);
				uni.setStorageSync('is_auth', true);
				uni.hideLoading();
				uni.showToast({
					title: '认证提交成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			} catch (error) {
				uni.showToast({ title: error.msg || '认证提交失败', icon: 'none' });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.auth-page {
	padding-bottom: 120rpx;
}

.steps {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 40rpx 60rpx;
	background-color: #fff;
}

.step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.step-number {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: #ffffff;
	border: 2rpx solid #eeeeee;
	font-size: 24rpx;
	color: #666666;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10rpx;
}

.step-title {
	font-size: 28rpx;
	color: #666666;
}

.active .step-number {
	width: 40rpx;
	height: 40rpx;
	background-color: #ff7937;
	color: #fff;
	font-size: 24rpx;
	text-align: center;
}

.active .step-title {
	color: #0b1f20;
	font-weight: 500;
}

.current .step-number {
}

.step-line {
	flex: 1;
	height: 16rpx;
	background: #f5f5f6;
	border-radius: 20rpx;
}

.step-content {
	background: #ffffff;
	border-radius: 16rpx;
	margin: 20rpx 26rpx 0 26rpx;
	padding: 34rpx 30rpx 54rpx 30rpx;
}

.step-content-multiple,
.step-content-one {
	margin-bottom: 40rpx;
}

.section-auth-title {
	font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
	font-weight: 700;
	font-size: 32rpx;
	color: #0b1f20;
	padding-bottom: 68rpx;
}

.section-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 32rpx;
	color: #0b1f20;
}

.section-subtitle {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 32rpx;
	padding-bottom: 28rpx;
}

.section-tips {
	font-size: 26rpx;
	color: #9ca3af;
	margin-bottom: 32rpx;
}

.upload-group {
	display: flex;
	justify-content: space-between;
	margin-bottom: 76rpx;
}

.upload-item {
	width: 48%;
	height: 280rpx;
	/* border: 1rpx dashed #ddd; */
	/* border-radius: 8rpx; */
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.upload-placeholder text {
	font-size: 26rpx;
	color: #0b1f20;
	margin-top: 34rpx;
}

.front-icon,
.reverse-side-icon {
	width: 240rpx;
	height: 140rpx;
}

.reverse-side-icon {
}

.uploaded-image {
	width: 100%;
	height: 100%;
}

.upload-single {
}

.upload-single .upload-item {
	width: 48%;
	height: 280rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-bottom: 40rpx;
}

.upload-single .upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.upload-placeholder text {
	font-size: 26rpx;
	color: #0b1f20;
	margin-top: 34rpx;
}

.uploaded-image {
	width: 100%;
	height: 100%;
}

.form-item {
	margin-bottom: 88rpx;
	display: flex;
	align-items: center;
}

.form-item:last-child {
	margin-bottom: 0rpx;
}

.form-item .form-label {
	width: 190rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 32rpx;
	padding-right: 32rpx;
}

.form-item .form-input {
	background-color: transparent;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.details-side-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: auto;
}

.form-item .form-input input {
	flex: 1;
	height: 100%;
	font-size: 32rpx;
	color: #999999;
	background-color: #fff;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 40rpx 26rpx;
	background-color: #fff;
}

.footer-agreement-warps {
	display: flex;
	align-items: center;
	margin-top: 36rpx;
}

.check-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.footer-agreement-warps text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #0b1f20;
	line-height: 54rpx;
}

.agreement-content {
}

.footer-btn-warps {
	display: flex;
}

.pre-btn {
	width: 240rpx;
	height: 100rpx;
	line-height: 100rpx;
	background: #ffffff;
	border-radius: 16rpx;
	font-size: 36rpx;
	color: #666666;
	margin-right: 20rpx;
	border: 2rpx solid #eeeeee;
}

.pre-btn:after {
	border: none;
}

.next-btn {
	flex: 1;
	background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
	color: #fff;
	height: 100rpx;
	line-height: 100rpx;
	border-radius: 16rpx;
	font-weight: 500;
	font-size: 36rpx;
}

.disabled {
	background-color: #ccc;
	opacity: 0.7;
}

.placeholder {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 32rpx;
	color: #999999;
}

.upload-single .single-label {
	padding-bottom: 32rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 32rpx;
}

.drive-section-auth-title {
	font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
	font-weight: 700;
	font-size: 32rpx;
	color: #0b1f20;
	padding-bottom: 68rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.drive-add-content {
	display: flex;
	align-items: center;
}

.drive-del-content {
	margin-left: 10rpx;
}

.drive-add-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 8rpx;
}

.drive-add-text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 28rpx;
	color: #ff7937;
	line-height: 32rpx;
}

.drive-del-text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
	line-height: 32rpx;
}
.location-placeholder {
	height: 200rpx;
}
</style>
